<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Confirm Dialog
    </ui:define>

    <ui:define name="description">
        ConfirmDialog is integrated with confirm behavior to implement confirmations with ease.
    </ui:define>

    <ui:param name="documentationLink" value="/components/confirm"/>
    <ui:param name="widgetLink" value="ConfirmDialog-1"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form>
                <p:growl id="message" showDetail="true"/>

                <p:commandButton value="Confirm" action="#{confirmView.confirm}" update="message" styleClass="mr-2" icon="pi pi-check">
                    <p:confirm header="Confirmation" message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle"/>
                </p:commandButton>

                <p:commandButton value="Delete" action="#{confirmView.delete}" update="message" styleClass="ui-button-danger mr-2" icon="pi pi-times">
                    <p:confirm header="Confirmation" message="Do you want to delete this record?" icon="pi pi-info-circle"/>
                </p:commandButton>
                
                <p:commandButton value="Non-Ajax" action="#{confirmView.nonAjax}" styleClass="ui-button-warning" icon="pi pi-question" ajax="false">
                    <p:confirm header="Confirmation" message="Submit this page and reload?" icon="pi pi-question-circle"/>
                </p:commandButton>

                <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no ui-button-flat"/>
                    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" />
                </p:confirmDialog>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
